<template>
  <div class="login-wrap">
    <div class="top-title"></div>
    <div class="login-welcome">欢迎使用</div>
    <div class="login-title">
      <span>客户协同</span>
      <span>系统</span>
    </div>
    <span class="login-bg"></span>
    <div class="login-form">
      <div class="login-form-title">
        <span
          ><h3
            style="margin-left: 43px;margin-right:40px;"
            @click="handleClick('phoneInfoTabs')"
            :class="[isActive == 'phoneInfoTabs' ? 'activeName' : '']"
          >
            验证码登录
          </h3></span
        >
        <span
          ><h3
            @click="handleClick('passwordInfoTabs')"
            :class="[isActive == 'passwordInfoTabs' ? 'activeName' : '']"
          >
            账号密码登录
          </h3></span
        >
      </div>

      <!-- 验证码登录 -->
      <div class="login-form-content">
        <div v-show="isActive == 'phoneInfoTabs'">
          <el-form :model="formInline">
            <el-form-item label="">
              <el-input
                v-model="formInline.phoneNum"
                placeholder="请输入手机号"
                clearable
              ></el-input>
              <!-- <el-input
                v-model="formInline.phoneNum"
                placeholder="请输入手机号"
                prefix-icon="el-icon-mobile-phone"
                clearable
              ></el-input> -->
            </el-form-item>
            <el-form-item label="">
              <el-input
                style="width: 200px"
                v-model="formInline.yzm"
                placeholder="请输入短信验证码"
                clearable
              >
              </el-input>

              <el-button class="code">
                <span v-if="quickCodeTime == 0" @click="getQuickCode()"
                  >获取验证码</span
                >
                <span v-else>
                  <span>{{ quickCodeTime }}</span
                  >秒后可重新获取
                </span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 账号密码登录 -->
        <div v-show="isActive == 'passwordInfoTabs'">
          <el-form :model="formInline">
            <el-form-item label="">
              <el-input
                v-model="formInline.phoneNum"
                placeholder="请输入账号\手机号"
                clearable
              ></el-input>
              <!-- <el-input
                v-model="formInline.phoneNum"
                placeholder="请输入手机号"
                prefix-icon="el-icon-mobile-phone"
                clearable
              ></el-input> -->
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="formInline.yzm"
                placeholder="请输入密码"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-form>
          <!-- <el-form :model="formInline">
            <el-form-item label="审批人">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
          </el-form> -->
        </div>

        <div v-if="isActive == 'passwordInfoTabs'" class="remember-pwd">
          <el-checkbox v-model="checked">记住密码</el-checkbox>
          <span>记住密码</span>
        </div>

        <el-button
          :class="[
            isActive == 'passwordInfoTabs'
              ? 'login-form-content-submitP'
              : 'login-form-content-submit',
          ]"
          @click="goHome()"
          >登录</el-button
        >
      </div>

      <!-- 微信、QQ、支付宝登录 -->
      <div class="login-form-a">
        <div class="item">
          <img src="../../assets/image/we-chat.png" alt="" />
          <span>微信登录</span>
        </div>

        <div class="item">
          <img src="../../assets/image/QQ.png" alt="" />
          <span>QQ登录</span>
        </div>

        <div class="item">
          <img src="../../assets/image/alipay.png" alt="" />
          <span>支付宝登录</span>
        </div>
      </div>
      <!-- <ul class="login-form-a">
        <li>其他登录方式：</li>
        <li>微信登录&nbsp;&nbsp;</li>
        <li>QQ登录&nbsp;&nbsp;</li>
        <li>支付宝登录&nbsp;&nbsp;</li>
      </ul> -->
    </div>
  </div>
</template>
<script>
import { getInfoApi } from "@/service/login.js";
export default {
  name: "Login",
  data() {
    return {
      isActive: "phoneInfoTabs",
      formInline: {
        phoneNum: "",
        yzm: "",
      },
      quickCodeTime: 0,
      timer_: null,
      checked: false,
    };
  },
  methods: {
    // 点击获取验证码
    getQuickCode() {
      this.quickCodeTime = 10;

      clearInterval(this.timer_);
      this.timer_ = setInterval(() => {
        if (this.quickCodeTime > 0) {
          this.quickCodeTime -= 1;
        }
        if (this.quickCodeTime == 0) {
          clearInterval(this.timer_);
        }
      }, 1000);
    },
    // 点击登录按钮
    goHome() {
      this.$router.push("/home/index");
    },
    getInfo() {
      getInfoApi({})
        .then((res) => {
          // console.log(res);
        })
        .catch((error) => {
          // console.log(error);
        });
    },
    // tabs切换点击
    handleClick(val) {
      this.isActive = val;
    },
  },
  created() {
    this.getInfo();
  },
};
</script>
<style lang="scss">
.login-form-content {
  .el-input__inner {
    height: 48px;
    border-radius: 8px;
  }

  .el-input-group__append {
    width: 110px;
    height: 48px;
    background: #004fee;
    border-radius: 8px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
  .el-checkbox__label {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
}
</style>
<style scoped lang="scss">
.login-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("../../assets/image/login-bg.png") no-repeat center center;
  background-size: 100% 100%;
  // background: rgba(68, 42, 141, 1);
  position: relative;

  .top-title {
    border-width: 0px;
    position: absolute;
    left: 24px;
    top: 23px;
    width: 176px;
    height: 38px;
    background: url("../../assets/image/logo.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .login-welcome {
    position: absolute;
    left: 226px;
    top: 170px;
    // width: 120px;
    height: 42px;
    font-size: 30px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 42px;
  }
  .login-title {
    position: absolute;
    left: 226px;
    top: 218px;
    font-size: 30px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #004fee;
    display: flex;
    height: 42px;
    line-height: 42px;
    letter-spacing: 10px;
    span:last-child {
      color: #000000;
    }
  }
  .login-bg {
    border-width: 0px;
    position: absolute;
    left: 120px;
    top: 284px;
    width: 760px;
    height: 390px;
    background: url("../../assets/image/login.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .login-form {
    width: 400px;
    height: 470px;
    position: absolute;
    left: 900px;
    top: 185px;
    display: flex;
    flex-direction: column;
    // padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 0px 11px 3px rgba(236, 236, 236, 0.86);
    border-radius: 10px;
    &-title {
      height: 56px;
      display: flex;
      // justify-content: space-around;
      border-bottom: 1px solid #eeeeee;
      span {
        // flex: 1;
        // position: relative;
      }
      h3 {
        position: relative;
        cursor: pointer;
        text-align: center;
        line-height: 56px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        // width: 120px;
      }
      .activeName {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        // width: 120px;
        border-bottom: 1px solid #004fee;
      }
      // .activeName::before {
      //   content: "";
      //   width: 50%;
      //   height: 2px;
      //   bottom: -6%;
      //   left: 50%;
      //   transform: translate(-50%, -50%);
      //   position: absolute;
      //   background: #004fee;
      // }
    }
    &-content {
      flex: 1;
      margin-top: 51px;
      margin-left: 40px;
      margin-right: 40px;
      // margin: 40px 51px 40px 0;
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      &-submit {
        position: absolute;
        top: 260px;
        left: 40px;
        width: 320px;
        height: 48px;
        background: #004fee;
        border-radius: 8px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
      .login-form-content-submitP {
        position: absolute;
        top: 284px;
        left: 40px;
        width: 320px;
        height: 48px;
        background: #004fee;
        border-radius: 8px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
    &-a {
      position: absolute;
      left: 53px;
      bottom: 59px;
      display: flex;
      align-items: center;
      .item {
        margin-right: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        img {
          margin-right: 5px;
        }
      }
    }
  }
}
.code {
  margin-left: 5px;
  width: 110px;
  height: 48px;
  background: #004fee;
  border-radius: 8px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}

.remember-pwd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -10px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #004fee;
}
</style>
